<template>
	<BaseContainer>
		<aplid-base-crud ref="crud" class="w-100" v-bind="baseConfig">
			<template #search>
				<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
					<el-tab-pane
						v-for="(item, index) in tabList"
						:key="index"
						:label="`${item.label}(${totalCount[item.active]})`"
						:name="item.active"
					></el-tab-pane>
				</el-tabs>
			</template>
			<template v-slot:auditDialog="{ row, show }">
				<ReceivePage @refresh="handleRefresh" :api="baseConfig.api" v-if="show" :nowRowData="row"></ReceivePage>
			</template>
		</aplid-base-crud>
	</BaseContainer>
</template>

<script setup lang="ts">
import { baseConfig } from './config'
import ReceivePage from './receive/index.vue'
import apiMod from '@/apiMod'

const activeName = ref('all')
const crud = ref()
let tabList = [
	{ label: '全部', active: 'all', value: '0' },
	{ label: '待处理', active: 'pending', value: '0' },
	{ label: '已处理', active: 'handled', value: '1' },
]
const totalCount = ref({
	all: 0,
	handled: 0,
	pending: 0,
})

const handleRefresh = (query) => {
	nextTick(() => {
		crud.value.refreshChange(query)
	})
}

const handleClick = (tab) => {
	const name = tab.paneName
	let str = {
		all: '',
		handled: 1,
		pending: 0,
	}
	handleRefresh({ appealStatus: str[name] })
}
const getInitCount = () => {
	apiMod.view_dpExceptionAppeal_count().then((res) => {
		totalCount.value = res.data
	})
}
onMounted(() => {
	getInitCount()
})
</script>

<style scoped></style>
